<template>
    <div class="cartcontrol">
            <div class="iconfont icon-remove_circle_outline" v-if="food.count"  @click="updateFoodCount1(false)"></div>
            <div class="cart-count" v-if="food.count">{{food.count}}</div>
            <div class="iconfont icon-add_circle" @click.prevent.stop="updateFoodCount1(true)"></div>
    </div>
</template>

<script>
    export default {
        name: "CartControl",
        props:{
            food:Object,
        },
        data() {
            return {};
        },
        computed: {},
        methods: {
            updateFoodCount1 (isAdd) {
                this.$store.dispatch('updateFoodCount', {isAdd, food: this.food});
            }
        },
        created() {
        },
        mounted() {
        },
    }
</script>

<style lang="stylus" rel="stylesheet/stylus">
    @import "../../common/stylus/mixins.styl"
    .cartcontrol
        font-size: 0
        .cart-decrease
            display: inline-block
            padding: 6px
            line-height: 24px
            font-size: 24px
            color: rgb(0, 160, 220)

        .icon-remove_circle_outline
            display: inline-block
            padding 6px
            line-height 24px
            font-size 24px
            color $green
            &.move-enter-active, &.move-leave-active
                transition all .3s
            &.move-enter, &.move-leave-to
                opacity 0
                transform translateX(15px) rotate(180deg)
        .cart-count
            display: inline-block
            vertical-align: top
            width: 12px
            padding-top: 6px
            line-height: 24px
            text-align: center
            font-size: 14px
            color: black
        .icon-add_circle
            display: inline-block
            padding: 6px
            line-height: 24px
            font-size: 24px
            color $green
</style>
